<template>
    <div id="search" class="searchPosition">
        <div id="head">
           {{cityname}}
        </div>
        <div class="parentSearch">
            <input type="text" v-model="message" id="searchText" @keyup="keyUpSearch" placeholder="请输入地址"/>  
        </div>
        <div class="address_items" id="address_result" v-if="searchData.length > 0">  
            <div @click="getLatLng(item.location.lat,item.location.lng)" class="address_item" v-for="item in searchData">  
                <div class="title">{{ item.name }}</div>  
                <div class="description">{{ item.pname }}{{ item.cityname }}{{ item.address }}</div> 
            </div>  
        </div>  
    </div>
</template>

<script>
import remoteLoad from '../../../js/remoteLoad.js'
export default {
    data(){
        let self = this;
        return {
            searchData:[],
            message:'',
            cityname:'北京'
        }
    },
    async created () {
        let self = this;
        if (!window.AMap) {
            
            await remoteLoad(`http://webapi.amap.com/maps?v=1.4.2&key=b02674c30e6ee45bdfb3c21d9c0b9c69`)
        }
    },
    mounted(){
        this.cityname = sessionStorage.cityname
    },
    methods: {
        keyUpSearch(){
            let self = this;
            let txt = self.message
            AMap.service(["AMap.PlaceSearch"], function() {
                let placeSearch = new AMap.PlaceSearch({ //构造地点查询类
                    pageSize: 5,
                    pageIndex: 1,
                    city: sessionStorage.citycode
                });
                //关键字查询
                placeSearch.search(txt,function(status,result){
                    self.searchData = result.poiList.pois
                });
            });
        },
        getLatLng(lat,lng){
            this.$store.commit('changeLat',{val:lat});
            this.$store.commit('changeLng',{val:lng});
            this.$router.back(-1)
        }
    }
}
</script>

<style scoped >
#searchText {
    width: 100%;
    height: 3rem;
    line-height: 3rem;
     background: #eee;
     border: 0;
    padding-left:1rem;
    box-sizing:border-box;
    font-size:1rem;
}
.searchPosition{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background: #ffffff;
}
#head{
        background: -moz-linear-gradient(top, #00AA76 0%, #1ACCAC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00AA76), color-stop(100%,#1ACCAC));
    background: -webkit-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: -o-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: -ms-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: linear-gradient(to right, #00AA76 0%,#1ACCAC 100%);
    font-size:1.2rem;
    color:#ffffff;
    text-align:center;
    height:3rem;
    line-height:3rem;
}
.parentSearch{
}
.address_items{
    padding:0 1rem;
    margin-top:1rem;
}
.address_item{
    line-height: 3rem;
    padding-left: 1rem;
    box-sizing: border-box;
    border-bottom: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
}
</style>
